<template>
  <Transition name="fade">
    <div v-if="isLoading" class="page-loader">
      <div class="page-loader__content">
        <!-- Logo -->
        <div class="page-loader__logo">
          <h1 class="text-gradient">Portfolio</h1>
        </div>
        
        <!-- 加载动画 -->
        <div class="page-loader__spinner">
          <div class="spinner-ring"></div>
          <div class="spinner-ring"></div>
          <div class="spinner-ring"></div>
        </div>
        
        <!-- 进度条 -->
        <div class="page-loader__progress">
          <div class="page-loader__progress-bar" :style="{ width: progress + '%' }"></div>
        </div>
        
        <!-- 加载文本 -->
        <p class="page-loader__text">{{ loadingText }}</p>
        <p class="page-loader__percentage">{{ Math.floor(progress) }}%</p>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  // 最小显示时间（毫秒）
  minDuration: {
    type: Number,
    default: 1500
  },
  // 是否自动隐藏
  autoHide: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['loaded'])

const isLoading = ref(true)
const progress = ref(0)
const loadingText = ref('初始化中...')

const loadingTexts = [
  '初始化中...',
  '加载资源...',
  '准备就绪...',
  '即将完成...'
]

const startTime = Date.now()

onMounted(() => {
  let currentTextIndex = 0
  
  // 模拟加载进度
  const progressInterval = setInterval(() => {
    // 随机增加进度
    const increment = Math.random() * 10 + 5
    progress.value = Math.min(progress.value + increment, 100)
    
    // 根据进度更新文本
    if (progress.value >= 25 && currentTextIndex === 0) {
      loadingText.value = loadingTexts[1]
      currentTextIndex = 1
    } else if (progress.value >= 50 && currentTextIndex === 1) {
      loadingText.value = loadingTexts[2]
      currentTextIndex = 2
    } else if (progress.value >= 80 && currentTextIndex === 2) {
      loadingText.value = loadingTexts[3]
      currentTextIndex = 3
    }
    
    // 完成加载
    if (progress.value >= 100) {
      progress.value = 100
      clearInterval(progressInterval)
      
      // 确保最小显示时间
      const elapsed = Date.now() - startTime
      const remainingTime = Math.max(0, props.minDuration - elapsed)
      
      setTimeout(() => {
        if (props.autoHide) {
          isLoading.value = false
        }
        emit('loaded')
      }, remainingTime)
    }
  }, 150)
})

// 暴露方法供父组件调用
defineExpose({
  hide: () => {
    isLoading.value = false
  },
  show: () => {
    isLoading.value = true
    progress.value = 0
  }
})
</script>

<style lang="scss" scoped>
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  @include flex-center;
  z-index: 9999;
  
  &__content {
    text-align: center;
  }
  
  &__logo {
    margin-bottom: $spacing-2xl;
    
    h1 {
      font-size: $font-size-4xl;
      font-weight: $font-weight-bold;
      margin: 0;
      
      @include respond-to('sm') {
        font-size: $font-size-3xl;
      }
    }
  }
  
  &__spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto $spacing-2xl;
  }
  
  &__progress {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: $radius-full;
    overflow: hidden;
    margin: 0 auto $spacing-lg;
    
    @include respond-to('sm') {
      width: 250px;
    }
  }
  
  &__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: $radius-full;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  
  &__text {
    color: white;
    font-size: $font-size-lg;
    margin-bottom: $spacing-sm;
    opacity: 0.9;
  }
  
  &__percentage {
    color: white;
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    margin: 0;
  }
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  
  &:nth-child(1) {
    animation-delay: -0.45s;
  }
  
  &:nth-child(2) {
    animation-delay: -0.3s;
    opacity: 0.7;
  }
  
  &:nth-child(3) {
    animation-delay: -0.15s;
    opacity: 0.4;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.text-gradient {
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>

